<template>
    <div class="time">
        <el-space :size="size" :spacer="spacer">
            <div class="currentTime">
                {{ currentTime }}
            </div>
            <div>
                <div>{{ currentDate }}</div>
                星期{{ numToChineseNum(currentWeek)}}
            </div>
        </el-space>


    </div>
</template>

<script lang="js" setup>
import { ref, h } from 'vue';
import { ElDivider } from 'element-plus'
import moment from "moment"


const currentTime = ref(moment().format("HH:mm:ss"))
const currentDate= ref(moment().format("YYYY年MM月DD日"))
const currentWeek = ref(moment().isoWeekday())

function numToChineseNum(num) {
    const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七'];
    return chineseNumbers[num];
}

setInterval(() => {
    currentTime.value = moment().format("HH:mm:ss");
}, 1000);
const size = ref(10)
const spacer = h(ElDivider, { direction: 'vertical' })
</script>

<style scoped lang="less">
.time {
    float: right;
    margin-right: 20px;
    .currentTime {
        width: 94px;
        height: 27px;
        font-family: ArialMT;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 28px;
        text-align: left;
        font-style: normal;
    }
}
</style>